<template>
  <div>
    <el-dialog
      width="60%"
      title="订单记录"
      :visible.sync="history.dialogFormVisiblehistory"
    >
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        height="280"
        style="width: 100%"
      >
        <el-table-column prop="oid" label="订单ID" width="180">
        </el-table-column>
        <el-table-column prop="change_message" label="操作记录" width="180">
        </el-table-column>
        <el-table-column prop="change_time" label="操作时间"> </el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        @prev-click="prevFun"
        @next-click="nextFun"
        :current-page="page"
        :page-size="limit"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import { orderhistory } from "../../api/index";
export default {
  props: ["history"],
  created() {
    this.ids = this.history.id;

    this.joint();
  },
  data() {
    return {
      tableData: [],
      page: 1,
      limit: 100,
      ids: 0,
      total: 0,
      loading: true,
    };
  },
  methods: {
    joint() {
      orderhistory({ id: this.ids, page: this.page, limit: this.limit }).then(
        (res) => {
          if (res.data.status == 200) {
            console.log(res.data);
            this.loading = false;
            this.tableData = res.data.data;
            this.total = res.data.data.length;
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    handleCurrentChange(val) {
      this.loading = true;
      this.page = val;
      this.joint();
    },
    prevFun(val) {
      this.loading = true;
      this.page = val;
      this.joint();
    },
    nextFun(val) {
      this.loading = true;
      this.page = val;
      this.joint();
    },
  },
};
</script>

<style lang="scss">
</style>